<!--

apiObj            ====>   远程数据API对象
apiMethod         ====>   远程请求方式，GET/POST，默认是GET
params            ====>   远程数据默认请求参数
loading           ====>   页面是否加载中
columns           ====>   表格列的配置描述
columnsDraggable  ====>   表格列是否支持拖拽排序，默认为true
data              ====>   数据数组
rowKey            ====>   表格行 key 的取值，可以是字符串或一个函数
pagination        ====>   分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页
scroll            ====>   表格是否可滚动，也可以指定滚动区域的宽、高，可在文档查看配置项
size              ====>   表格大小, large | middle | small
sticky            ====>   设置粘性头部和滚动条,boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}
isResizeColumn    ====>   是否开启伸缩列，如果开启的话，在columns的每列【必须加上with，且为number】否则不生效
lightIndex        ====>   要高亮的行数据索引，支持数组，如[0,1]
isRowSelection    ====>   是否允许勾选，默认为true
isExport          ====>   是否需要导出，默认为false
isPrint           ====>   是否需要打印，默认为false
defaultExpandAllRows =>   初始时，是否展开所有行，默认false，当数据有children时生效
isShowTool        ====>   是否显示右侧的工具按钮，默认为true

Event
dataChange         ====>   数据加载完成后
selectionChange    ====>   当选择项发生变化时会触发该事件
rowClick           ====>   当点击了行事情，可以配合setRowLight实现行高亮
pageChange         ====>   页码或 pageSize 改变的回调，参数是改变后的页码及每页条数

Methods
refresh            ====>   刷新表格
upData             ====>   更新表格(合并上一次params)，参数：params, page
reload             ====>   重载表格(替换params)，参数：params, page
setRowLight        ====>   设置当前行高亮
onExpandAll        ====>   当是树列的时候，支持展开，入参：true/false

slot
headerCell         ====>   自定义表头
bodyCell           ====>   自定义数据列

-->
<template>
  <a-row align="middle" justify="space-between" class="base-mb10">
    <a-col :span="20">
      <template v-if="isRowSelection">
        <!--         v-model:checked="checked"-->
        <a-checkbox class="base-ml10" v-model:checked="isCheckAll" @change="selectAll">
          <span class=" base-ml10">当页全选</span></a-checkbox>
        <a-button type="text">已选 {{ tableSelectedRowKeys.length }} 项</a-button>
      </template>

      <slot name="top"></slot>
    </a-col>
    <a-col :span="4" align="right" v-if="props.isShowTool">

      <template v-if="isExport">
        <a-tooltip>
          <template #title>数据导出</template>
          <icon-font type="icon-daochu10" class="base-f18 base-pointer" @click="onExport"></icon-font>
        </a-tooltip>
      </template>

      <template v-if="isPrint">
        <a-tooltip>
          <template #title>打印报表</template>
          <icon-font type="icon-dayin" class="base-ml20 base-f18 base-pointer" v-print="printContent"></icon-font>
        </a-tooltip>
      </template>

      <icon-font type="icon-shuaxin2" class="base-ml20 base-f18 base-bold base-pointer" @click="reload"></icon-font>

      <a-popover v-model:open="visibleChooseCols" trigger="click" placement="bottomRight">
        <template #title>
          <a-checkbox
              v-model:checked="cols.checkAll"
              :indeterminate="cols.indeterminate"
              @change="onCheckAllChange"
          >
            全选
          </a-checkbox>
          <DragOutlined/>
        </template>
        <template #content>
          <div class="choose-cols-wrapper">
            <a-checkbox-group v-model:value="cols.checkedList" @change="onChangeCols">
              <div class="base-flex base-columns">
                <div class="checkbox-item" v-for="(item, index) in colsOptions" :key="index"
                     :draggable="props.columnsDraggable"
                     @dragstart="columnDragStart(item, $event)"
                     @dragover="columnDragOver($event)"
                     @drop="columnDragFinish(item, $event)"
                     @dragend="columnDragEnd(item)"
                >
                  <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
                </div>
              </div>
            </a-checkbox-group>
          </div>
        </template>
        <icon-font type="icon-cols" class="base-ml20" style="font-size: 18px; cursor: pointer;"/>
      </a-popover>

    </a-col>
  </a-row>
  <div :id="tableLocalConfig.id" style="position: relative">
    <!--    :expanded-row-keys="tableLocalConfig.expandedRowKeys" -->
    <!--    :defaultExpandAllRows="defaultExpandAllRows"-->
    <a-table class="s-table" :key="tableLocalConfig.isLoadEnd" :loading="tableLocalConfig.trueLoading" :columns="tableLocalConfig.trueColumns" :data-source="tableLocalConfig.trueData" :row-key="rowKey" :expanded-row-keys="tableLocalConfig.expandedRowKeys" :pagination="false" :row-selection="isRowSelection ? { selectedRowKeys: tableSelectedRowKeys, onChange: handleTableChange, onSelectAll: handleSelectAll } : null" :scroll="scroll" :size="size" @expand="onExpandTable" @change="onChangeTable" @resizeColumn="handleResizeColumn" :rowClassName="setTableRowClassName" :customRow="(record, index) => {
        return {
          onClick: (event) => {onClickTableRow(record, index, event)},       // 点击行
          onDblclick: (event) => {},
          onContextmenu: (event) => {},
          onMouseenter: (event) => {},  // 鼠标移入行
          onMouseleave: (event) => {}
        }
    }">
      <template #headerCell="{ column }">
        <slot name="headerCell" :column="column"></slot>
      </template>
      <template #bodyCell="{ column, record, text, index }">
        <slot name="bodyCell" :text="text" :column="column?column:{}" :record="record?record:{}" :index="index">
        </slot>
      </template>
    </a-table>
  </div>

  <!--   :show-total="total => `共 ${total} 条`" -->
  <div class="base-mt20 base-flex base-rows base-align-items-center base-justify-content-end" v-if="!hidePagination">
    <a-pagination v-model:current="truePagination.current" show-quick-jumper show-size-changer :total="truePagination.total" :show-total="total => $t('self.pagination.tips1') + ` ${total} ` + $t('self.pagination.tips2')" @change="onChangePaginationPage" @showSizeChange="onChangePaginationShowSize"/>
  </div>

</template>

<script setup>
import cloneDeep from 'lodash.clonedeep'
import * as XLSX from 'xlsx'
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from 'vue'
import config from '@/config/table'
import { useRoute } from 'vue-router'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $CONFIG = proxy.$CONFIG
const route = useRoute()

const emit = defineEmits(['dataChange', 'selectionChange', 'pageChange', 'rowClick'])
const props = defineProps({
  apiObj: {
    type: Object,
    default: () => {
    }
  },
  apiMethod: {
    type: String,
    default: () => {
      return 'GET'
    }
  },
  apiAutoLoad: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  params: {
    type: Object,
    default: () => {
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array,
    default: []
  },
  columnsDraggable: {
    type: Boolean,
    default: true
  },
  data: {
    type: Array,
    default: []
  },
  rowKey: {
    type: [String, Function],
    default: ''
  },
  pagination: {
    type: [Object, Boolean],
    default: false
  },
  scroll: {
    type: Object,
    default: {}
  },
  size: {
    type: String,
    default: 'large'
  },
  sticky: {
    type: [Boolean, Object],
    default: false
  },
  isResizeColumn: {
    type: Boolean,
    default: true
  },
  lightIndex: {
    type: Array,
    default: []
  },
  isRowSelection: {
    type: Boolean,
    default: true
  },
  isExport: {
    type: Boolean,
    default: false
  },
  isPrint: {
    type: Boolean,
    default: false
  },
  defaultExpandAllRows: {
    type: Boolean,
    default: false
  },
  isShowTool: {
    type: Boolean,
    default: true
  }
})
const tableLocalConfig = ref({
  id: 'table-' + $TOOL.string.uuid(),
  trueLoading: false, // 表格是否是否显示Loading
  trueColumns: [],    // 表格实际显示列
  trueData: [],        // 表格实际数据
  isLoadEnd: false,       // 是否加载完成
  expandedRowKeys: []     // 展开的行
})
const tableSelectedRowKeys = ref([])
const tableParams = ref({})
const sortField = ref(null) // 参与排序的字段
const sortOrder = ref(null)// 排序方式
// 表格实际分页
const truePagination = ref({
  total: 0,
  current: 1,
  pageSize: config.pageSize,
  pageSizeOptions: config.pageSizes
})
const hidePagination = ref(true)

// localStorage存储名称
const storageKEY = "ROUTES_STABLE_COLS"
const storageCurrentKey = route.name

// 是否显示
const visibleChooseCols = ref(false)

/**
 * 下拉选择列的数组，格式以label，value
 * @type {Ref<UnwrapRef<[{label: string, value: string}]>>}
 */
const colsOptions = ref([])

const cols = ref({
  checkAll: false,  // 是否全选
  indeterminate: true,  // 设置 indeterminate 状态，只负责样式控制
  checkedList: [] // 保存已经选择的列，存储value
})

const printContent = ref({
  id: tableLocalConfig.value.id, // 打印的区域
  preview: false, // 预览工具是否启用
  // previewTitle: '这是预览标题', // 预览页面的标题
  popTitle: '' // 打印页面的页眉
  // extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  // extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
  // previewBeforeOpenCallback() {
  //   console.log('正在加载预览窗口')
  // },
  // previewOpenCallback() {
  //   console.log('已经加载完预览窗口')
  // },
  // beforeOpenCallback(vue) {
  //   vue.printLoading = true
  //   console.log('打开之前')
  // },
  // openCallback(vue) {
  //   vue.printLoading = false
  //   console.log('执行了打印')
  // },
  // closeCallback() {
  //   console.log('关闭了打印工具')
  // },
  // clickMounted(vue){
  //   console.log('点击了打印按钮');
  //   // vue.printContent.popTitle = vue.tableHead // 动态设置页眉
  // }
})

const isCheckAll = computed(() => {
  return !!(tableSelectedRowKeys.value.length && tableSelectedRowKeys.value.length === tableLocalConfig.value.trueData.length)
})

// watch(() => tableLocalConfig.value.trueData, (curr, old) => {
//   console.log('trueData', curr)
// })
// const hidePagination = computed(() => !!props.pagination)

watch(() => props.apiObj, (curr, old) => {
  tableParams.value = props.params
  refresh()
})

watch(() => props.data, (curr, old) => {
  tableLocalConfig.value.trueData = curr
})

watch(() => props.pagination, (curr, old) => {
  // console.log('pagination 1', curr)
  if (curr) {
    Object.assign(truePagination.value, curr || {})
    hidePagination.value = false
  } else {
    hidePagination.value = true
  }
})

watch(() => props.columns, (curr, old) => {
  tableLocalConfig.value.trueColumns = props.columns
  resetColsOptionsFromColumns(curr)
})

watch(() => props.loading, (curr, old) => {
  tableLocalConfig.value.trueLoading = curr
})

onMounted(async () => {
  tableLocalConfig.value.trueLoading = props.loading

  // 分页部分，是否显示
  if (props.pagination) {
    truePagination.value = props.pagination
    hidePagination.value = false
  } else {
    hidePagination.value = true
  }

  //判断是否静态数据
  if (props.apiObj && props.apiAutoLoad) {
    tableParams.value = props.params || {}
    hidePagination.value = false
    await getData() // 从接口中获取

  } else if (props.data) {
    tableLocalConfig.value.trueData = props.data  // 直接赋值

    // https://www.jianshu.com/p/20251885b37c
    // 这里为了配合defaultExpandAllRows属性
    setTimeout(() => {
      if (props.defaultExpandAllRows) {
        // 如果展开的话，调用全部展开的方法
        onExpandAll(true)
      }
      tableLocalConfig.value.isLoadEnd = true
    }, 200)
    // tableLocalConfig.value.trueLoading = false  // 由props赋值，这里不做主动取消loading
    // console.log('table直接赋值')
    // console.log(tableLocalConfig.value.isLoadEnd)
  }

  // 根据列表初始可勾选的全部列，以及处理字段列的附加字段
  initColsOptionsAndTrueColumns()

})

const initColsOptionsAndTrueColumns = () => {
  // 从字段列的数据中提取并赋值 => 右侧可以勾选的表格列数据
  resetColsOptionsFromColumns(props.columns)

  // 获取缓存字段列已勾选的列表
  // 赋值表格列数据
  const localStorageData = $TOOL.data.get(storageKEY)
  let checkedList = []
  if (props.columns && localStorageData && localStorageData[storageCurrentKey] && localStorageData[storageCurrentKey].length) {
    // console.log('localStorageData', localStorageData)
    // 已选择的表格列从缓存读
    checkedList = localStorageData[storageCurrentKey]
  } else {
    // 已选择的表格列，从传参栏目里取
    checkedList = props.columns.map((ele) => {
      return ele.key
    })
  }

  // 右侧字段筛选 赋值 => 是否全选，已选择哪些
  // console.log('已选', checkedList)
  cols.value = {
    checkAll: (props.columns.length === checkedList.length),
    checkedList: checkedList,
    indeterminate: false
  }

  // 根据已经勾选的显示列，重置表格中实际显示的列
  resetTrueColumnsByColsOptionsAndChecked()
}

/**
 * 自定义全选
 * @param e
 */
const selectAll = (e) => {
  const isCheckAll = e.target.checked

  const tableData = tableLocalConfig.value.trueData
  const formatter = props.rowKey
  const selectedRowKeys = []
  if (isCheckAll) {
    tableData.forEach((key, i) => {
      if (typeof formatter === 'function') {
        //函数调用，返回值
        selectedRowKeys.push(formatter(tableData[i]))
      } else {
        selectedRowKeys.push(tableData[i][formatter])
      }
    })
  }
  // 手动修改 selectedRowKeys，和 Table 组件内的 selectedRowKeys 联动
  handleTableChange(selectedRowKeys, [...tableData])
}

// // 表格勾选checkbox
// const tableSelection = ref({
//   checkStrictly: false,
//   onChange: (selectedRowKeys, selectedRows) => {
//     tableSelectedRowKeys.value = selectedRowKeys
//     emit('selectionChange', selectedRowKeys, selectedRows)
//   },
//   // onSelect: (record, selected, selectedRows) => {
//   //   // console.log(record, selected, selectedRows);
//   // },
//   onSelectAll: (selected, selectedRows, changeRows) => {
//     console.log(tableSelection.value.checkStrictly)
//     console.log(selected, selectedRows, changeRows);
//   },
// });

/**
 * 表格change事件
 * @param selectedRowKeys
 * @param selectedRows
 */
const handleTableChange = (selectedRowKeys, selectedRows) => {
  tableSelectedRowKeys.value = selectedRowKeys
  emit('selectionChange', selectedRowKeys, selectedRows)
  // console.log(selectedRowKeys, selectedRows)
  // console.log('handleTableChange1')
}

/**
 * 表格全选事件，改造为selectionChange暴露方法
 * @param selected
 * @param selectedRows
 */
// 改造一下全选
const handleSelectAll = (selected, selectedRows) => {
  const tableData = tableLocalConfig.value.trueData
  const formatter = props.rowKey
  const selectedRowKeys = []
  tableData.forEach((key, i) => {
    if (typeof formatter === 'function') {
      //函数调用，返回值
      selectedRowKeys.push(formatter(tableData[i]))
    } else {
      selectedRowKeys.push(tableData[i][formatter])
    }
  })
  console.log('handleSelectAll2')
  emit('selectionChange', selectedRowKeys, selectedRows)
  // console.log(selected, selectedRows, changeRows)
}

/**
 * 通过给的表格列数据，重置用户可勾选的列头
 * @param columnsValue
 */
const resetColsOptionsFromColumns = (columnsValue) => {
  if (columnsValue && columnsValue.length) {
    colsOptions.value = columnsValue.map((ele) => {
      return {
        label: ele.title,
        value: ele.key
      }
    })
  }
}

/**
 * 根据已选择的列，可勾选的表头，重置实际表格列
 */
const resetTrueColumnsByColsOptionsAndChecked = () => {
  // 把表格列索引重排
  const columns = cloneDeep(props.columns.map(ele => {
    if (ele.width) {
      Object.assign(ele, {
        resizable: true
      })
    }
    return ele
  }))

  if(!props.isShowTool) {
    tableLocalConfig.value.trueColumns = columns
  }else{
    // 已选择的列
    const checkedValue = cols.value.checkedList

    // 重组列 trueColumns
    const columnsForIndex = $TOOL.array.index(columns, 'key')

    const trueColumnsFromColsOption = []
    colsOptions.value.forEach((col, index) => {
      // 下拉的col值 只有 value / label
      // 过滤不在选择范围内的表格列
      if ($TOOL.array.arrayIndexOf(cols.value.checkedList, col.value) !== -1) {
        trueColumnsFromColsOption.push(columnsForIndex[col.value])
      }
    })

    cols.value.checkAll = false
    if (checkedValue.length === props.columns.length) {
      cols.value.checkAll = true
    }

    if (props.isResizeColumn) {
      tableLocalConfig.value.trueColumns = trueColumnsFromColsOption
    } else {
      tableLocalConfig.value.trueColumns = trueColumnsFromColsOption
    }

    let localStorageData = $TOOL.data.get(storageKEY)
    // console.log(localStorageData)
    if (!localStorageData) {
      localStorageData = {}
    }
    localStorageData[storageCurrentKey] = $TOOL.array.getColumn(tableLocalConfig.value.trueColumns, 'key')
    // 这里存储的时候与排序无关了
    $TOOL.data.set(storageKEY, localStorageData)
  }
}

/**
 * 点击展开图标时触发
 * @param expanded
 * @param record
 */
const onExpandTable = (expanded, record) => {
  const formatter = props.rowKey
  let key
  if (typeof formatter === 'function') {
    //函数调用，返回值
    key = formatter(record)
  } else {
    key = record[formatter]
  }
  if (expanded) {
    tableLocalConfig.value.expandedRowKeys.push(key)
  } else {
    tableLocalConfig.value.expandedRowKeys = tableLocalConfig.value.expandedRowKeys.filter(item => item !== key)
  }
  // console.log(tableLocalConfig.value.expandedRowKeys)
  // console.log(expanded, record)
}

/**
 * 表格发生变化，包括 分页，筛选，排序
 * @param pagination
 * @param filters
 * @param sorter
 */
const onChangeTable = (pagination, filters, sorter) => {
  // console.log(pagination, filters, sorter)
  const page = pagination.current
  if (sorter) {
    sortField.value = sorter.field
    sortOrder.value = sorter.order
  }
  // console.log(truePagination.value)
  upData({
    [sortField.value]: sortOrder.value
  }, page)
}
const onChangePaginationPage = (pageNumber, pageSize) => {
  truePagination.value.current = pageNumber
  emit('pageChange', pageNumber, pageSize)
  if (props.apiObj) {
    upData({}, pageNumber)
  }
}

const onChangePaginationShowSize = (current, size) => {
  truePagination.value.current = current
  truePagination.value.pageSize = size
}

/**
 * 全选 / 全不选
 * @param e
 */
const onCheckAllChange = (e) => {
  const checked = e.target.checked
  const checkedList = checked ? colsOptions.value.map((ele) => {
    return ele.value
  }) : []
  Object.assign(cols.value, {
    checkAll: (props.columns.length === checkedList.length),
    checkedList: checkedList,
  })
  resetTrueColumnsByColsOptionsAndChecked()
}

/**
 * 用户勾选显示列
 * @param checkedValue
 */
const onChangeCols = (checkedValue) => {
  // 重置实际展示表格列数据
  resetTrueColumnsByColsOptionsAndChecked()
}

/**
 * 用户拖拽列宽度
 * @param w
 * @param col
 */
const handleResizeColumn = (w, col) => {
  // 如果开启伸缩列
  if (props.isResizeColumn) {
    col.width = w
    // console.log('开启伸缩列')
  }
}

/**
 * 点击表格行事件
 * @param record  行内容
 * @param index   行索引
 * @param e
 */
const onClickTableRow = (record, index, e) => {
  // console.log('onClickTableRow', index)
  emit('rowClick', record, index)
}

/**
 * 设置表格行样式
 * @param record
 * @param index
 */
const setTableRowClassName = (record, index) => {
  return $TOOL.array.arrayIndexOf(props.lightIndex, index) !== -1 ? 'table-cell-row-selected' : ''
  // return index === selectedTableRowIndex.value ? 'table-cell-row-selected' : ''
}

/**
 * 勾选显示列dom支持拖动排序 start ===
 */
const columnDragItem = ref(null)
// 在拖拽开始时，通过dragStart函数将当前拖拽的元素保存到columnDragItem变量中
// 并将拖拽的数据以字符串形式存储在数据传输对象中
const columnDragStart = (record, event) => {
  columnDragItem.value = record
  // 设置拖拽操作的效果为移动
  // 在设置 effectAllowed 属性后，可以在 dragstart 和 dragover 事件中使用 dropEffect 属性来指定拖拽操作的效果。
  // 也支持其他：
  // 'none': 不允许拖拽操作。
  // 'copy': 拖拽操作会复制被拖拽的数据。
  // 'move': 拖拽操作会移动被拖拽的数据。
  // 'link': 拖拽操作会创建一个指向被拖拽数据的链接。
  event.dataTransfer.effectAllowed = 'move'
  //并将拖拽的数据以字符串形式存储在数据传输对象中。
  // 其中，item是一个JavaScript对象，通过JSON.stringify()方法将其转换为字符串。
  event.dataTransfer.setData('text/plain', JSON.stringify(record))
}
// 在拖拽过程中，使用dragOver函数监听dragover事件，
// 并调用event.preventDefault()方法，以允许元素被拖拽到新的位置
const columnDragOver = (event) => {
  event.preventDefault()
  event.dataTransfer.dropEffect = 'move'
}
// 在拖拽完成时，使用drop函数将拖拽的元素替换到目标位置，并更新list数组
const columnDragFinish = (record, event) => {
  event.preventDefault()
  /**
   * 从数据传输对象中获取之前通过 setData() 方法存储的数据，
   * 通过 JSON.parse() 方法将其转换为对象。
   * 用于获取在拖拽操作中传递的数据。
   */
  const data = JSON.parse(event.dataTransfer.getData('text/plain'))
  // console.log('data',data)
  // console.log('item',record)
  // 通过 findIndex() 方法查找 list 数组中第一个满足条件的元素的索引，这里的条件是该元素的 id 属性等于 item 对象的 value 属性。
  // 被替换的元素
  const index1 = colsOptions.value.findIndex(i => i.value === record.value)
  //通过 findIndex() 方法查找 data 对象在 list 数组中的索引
  const index2 = colsOptions.value.findIndex(i => i.value === data.value)
  colsOptions.value[index1] = data
  colsOptions.value[index2] = record

  // 重置展示列
  resetTrueColumnsByColsOptionsAndChecked()
}
// 在拖拽结束时，通过dragEnd函数将dragItem变量重置为null
const columnDragEnd = record => {
  columnDragItem.value = null
}
/**
 * 勾选显示列dom支持拖动排序 end ===
 */

/**
 * table数据导出
 */
const onExport = () => {
  const headersName = []
  const headersTitle = []
  tableLocalConfig.value.trueColumns.forEach((ele, index) => {
    if (ele.key !== 'action') {
      headersName.push(ele.key)
      headersTitle.push(ele.title)
    }
  })

  const data = tableLocalConfig.value.trueData.map(ele => {
    return headersName.map(key => {
      return ele[key]
    })
  })

  const worksheet = XLSX.utils.aoa_to_sheet([headersTitle, ...data])
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  XLSX.writeFile(workbook, $TOOL.time.now('Y-m-d') + '_导出数据.xlsx')
}

const getData = async () => {
  // 通过API请求
  tableLocalConfig.value.isLoadEnd = false
  tableLocalConfig.value.trueLoading = true
  var reqData = {
    [config.request.page]: truePagination.value.current,
    [config.request.pageSize]: truePagination.value.pageSize
    // [config.request.prop]: sortField.value,
    // [config.request.order]: sortOrder.value // 排序方式
  }
  if (sortField.value) {
    reqData[config.request.prop] = sortField.value // 排序字段
  }
  if (sortOrder.value) {
    reqData[config.request.order] = sortOrder.value // 排序方式，'ascend' | 'descend'
  }
  // setTimeout(() => {
  //   console.log('重新请求', reqData)
  //   tableLocalConfig.value.trueLoading = false
  //   tableLocalConfig.value.isLoadEnd = true
  // }, 1000)
  // if(this.hidePagination){
  //   delete reqData[config.request.page]
  //   delete reqData[config.request.pageSize]
  // }
  // console.log(tableParams.value)
  Object.assign(reqData, tableParams.value)
  // console.log(reqData)
  let res
  try {
    // 所有的列表当前站点都是pose，所以这里是post
    if(props.apiMethod === 'GET') {
      res = await props.apiObj.get(reqData)
    }else{
      res = await props.apiObj.post(reqData)
    }
  } catch (error) {
    console.log('请求失败', error)
    // this.emptyText = error.statusText;
    return false
  }

  try {
    var response = config.parseData(res)
  } catch (error) {
    this.loading = false
    console.log('结构体数据格式错误')
    // this.emptyText = "数据格式错误";
    return false
  }
  // return
  if (response.code !== config.successCode) {
    tableLocalConfig.value.trueLoading = false
    tableLocalConfig.value.isLoadEnd = true
  } else {
    // if(this.hidePagination){
    //   this.tableData = response.data || [];
    // }else{
    tableLocalConfig.value.trueData = response.rows || []
    // truePagination.value.total = response.total
    // }
    truePagination.value.total = response.total || 0
    tableLocalConfig.value.trueLoading = false
    tableLocalConfig.value.isLoadEnd = true
  }

  // console.log(tableLocalConfig.value.trueData)
  // console.log(tableLocalConfig.value.isLoadEnd)
  // console.log(tableLocalConfig.value.trueData)
  // this.$refs.scTable.setScrollTop(0)
  emit('dataChange', res, response.data)
}

// 刷新数据
const refresh = () => {
  getData()
}

//更新数据 合并上一次params
const upData = (params, page = null) => {
  // console.log('更新数据', params)
  // Object.assign(truePagination.value, pagination)
  if (page) {
    truePagination.value.current = page
  }
  Object.assign(tableParams.value, params || {})
  getData()
}

//重载数据 替换params
const reload = (params, page = 1) => {

  //判断是否静态数据
  if (props.apiObj) {

    tableLocalConfig.value.trueData = []
    truePagination.value.current = page
    tableParams.value = params || {}
    getData()

  } else if (props.data) {
    tableLocalConfig.value.isLoadEnd = false
    tableLocalConfig.value.trueLoading = true
    // tableLocalConfig.value.trueData = [] // 静态数据只做重新赋值
    setTimeout(() => {
      tableLocalConfig.value.trueData = props.data  // 直接赋值
      tableLocalConfig.value.isLoadEnd = true
      tableLocalConfig.value.trueLoading = false
    }, 500)
  }
}

const onExpandAll = (status) => {
  let selectedRowKeys = []
  if (status) {
    // 全部展开
    selectedRowKeys = getAllTableKeys()
  } else {
    // 全部收回
  }
  // console.log(selectedRowKeys)
  tableLocalConfig.value.expandedRowKeys = selectedRowKeys
}

function getAllTableKeys () {
  const tableData = tableLocalConfig.value.trueData
  const result = []

  function dfs (node) {
    const formatter = props.rowKey
    node.forEach((key, i) => {
      const currentNode = node[i]
      if (typeof formatter === 'function') {
        //函数调用，返回值
        result.push(formatter(currentNode))
      } else {
        result.push(currentNode[formatter])
      }
      if (currentNode.children && currentNode.children.length) {
        dfs(currentNode.children)
      }
    })
  }

  dfs(tableData)
  return result
}

// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({ refresh, upData, reload, onExpandAll })
</script>

<style lang="scss" scoped>
// 选择显示列
.choose-cols-wrapper {

}

// 表格行高亮
.table-cell-row-selected {
  background: #eee !important;
}

</style>
